<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
    <script type="text/javascript" src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>

    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>

        <!-- 容器 -->

        <!-- 
            vue-router提供的标签<router-view></router-view>不是一个原生dom元素。
            不能绑定事件，无keyup事件，只能借助vue监听一些非dom元素的事件
            vue提供的watch监视路由地址改变
         -->
        <router-view></router-view>
    </div>

    <script type="text/javascript">
        // 2. 创建子组件
        var login = {
            template: '<h1>登陆组件</h1>'
        };

        var register = {
            template: '<h1>注册组件</h1>'
        };

        // 3. 创建一个路由对象
        var router = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register }
            ],
            linkActiveClass: 'myactive' // 和激活相关的类
        });

        // 创建 Vue实例，得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            // router: router
            router,
            watch: {
                //  this.$route.path
                '$route.path': function (newVal, oldVal) {
                    // console.log(newVal + ' --- ' + oldVal);
                    if (newVal === '/login') {
                        console.log('欢迎来到登陆界面');
                    } else if (newVal === '/register') {
                        console.log('欢迎来到注册界面');
                    }
                }
            }
        });

    </script>
</body>

</html>